import { DownOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Dropdown, Menu, message,Divider } from 'antd';
import React, { useState, useRef } from 'react';
import { history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { queryCoachAndSaleList,batchRemoveEmployee } from './service';
import {HasPermission} from '@/components/AuthComponent/HasPermission';
const AuthButton = HasPermission(Button);
const AuthDivider = HasPermission(Divider);
/**
 *  删除节点
 * @param selectedRows
 */
const handleRemove = async selectedRows => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;

  try {
    await batchRemoveEmployee({
      ids: selectedRows.map(row => row.userId),
    });
    hide();
    message.success('删除成功，即将刷新');
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};


const List = props => {
  const actionRef = useRef();
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '手机号',
      dataIndex: 'mobile'
    },
    {
      title: '地址',
      dataIndex: 'province',
      render:(text,record)=><>{record.province||""}{record.city||""}{record.district||""}</>
    },
    {
      title: '是否允许登录',
      dataIndex: 'allowLogin',
      valueEnum: {
        1: {
          text: '允许',
          status: 'Success',
        },
        2: {
          text: '不允许',
          status: 'Error',
        },
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        0: {
          text: '禁用',
          status: 'Error',
        },
        1: {
          text: '正常',
          status: 'Success',
        },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
            <AuthButton auth={[`employee:coach:detail`]} type="link"  onClick={() => goToDetail(record)}>详情</AuthButton>
            <AuthDivider auth={['employee:coach:detail',`employee:coach:update`]} type="vertical"></AuthDivider>
            <AuthButton auth={[`employee:coach:update`]} type="link"  onClick={() => goToEdit(record)}>编辑</AuthButton>
        </>
      ),
    },
  ];

   /**
   * 新增
   * @param {*} async 
   */
  const goToSave = async  => {
    history.push(`/employee/coach/save`);
  };

  /**
   * 编辑
   * @param {*} record 
   */
  const goToEdit = async record => {
    history.push(`/employee/list/update/${record.userId}`);
  };
  const goToDetail = record =>{
    history.push(`/employee/list/detail/${record.userId}`);
  }

  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="userId"
        toolBarRender={(action, { selectedRows }) => [
          <AuthButton auth={[`employee:coach:add`]} type="primary" icon={<PlusOutlined />} onClick={() => goToSave()}>新增</AuthButton>,
          selectedRows && selectedRows.length > 0 && (
            <Dropdown
              overlay={
                <Menu
                  onClick={async e => {
                    if (e.key === 'remove') {
                      await handleRemove(selectedRows);
                      action.reload();
                    }
                  }}
                  selectedKeys={[]}
                >
                  <Menu.Item key="remove">批量删除</Menu.Item>
                </Menu>
              }
            >
              <AuthButton auth={[`employee:coach:batch:delete`]} >批量操作 <DownOutlined /></AuthButton>
            </Dropdown>
          ),
        ]}
        tableAlertRender={({selectedRowKeys, selectedRows}) => (
          <div>
            已选择{' '}
            <a
              style={{
                fontWeight: 600,
              }}
            >
              {selectedRowKeys.length}
            </a>{' '}
            项
          </div>
        )}
        request={params => {
          let _params={
            empType:2,
            pageNum:params.current,
            ...params,
          }
          delete _params.current
          return queryCoachAndSaleList(_params)
        }}
        postData={result=>result.list}
        columns={columns}
        rowSelection={{}}
      />
    </PageHeaderWrapper>
  );
};

export default List;
